<template>
	<view>
		<view v-for="(item, index) in resetTimes" :key="item.id" class="order-list card">
			<view class="card-top" @click="onStore(item.store_Id)">
				<view class="card-top-left">
					<view class="card-top-left-logo1">
						<i-icon icon="icondianpu" type="single" size="40rpx" color="rgb(255,225,60)"></i-icon>
					</view>
					<view class="card-top-left-title">{{ item.store_Name }}</view>
					<view class="card-top-left-logo2 flex flex-ai-c">
						<i-icon icon="iconbao_1" type="single" size="32rpx" color="rgb(251,176,0)"></i-icon>
						<view style="margin-left: 20rpx;">
							<u-icon name="arrow-right" size="24rpx" color="#999999"></u-icon>
						</view>
					</view>
				</view>
				<view class="card-top-right">
					<!-- {{item.status | formatStoreType}} -->
					{{ status.find(data => data.id === item.status).status }}
				</view>
			</view>

			<view @click="toDetailPage(item, item.status)">
				<view class="card-middle">
					<view class="card-middle-content flex flex-ai-fs">

						<!-- 车型： -->
						<view class="card-middle-content__img flex flex-ai-c width">
							<image style="width: 36rpx;height: 36rpx;"
								:src="'https://files.yzsheng.com/goodimg/brandimg/' + item.brand_Id + '.png'"
								mode="widthFix"></image>
							<text style="font-size: 28rpx;letter-spacing: 13rpx;">车型:</text>
						</view>

						<view class="card-middle-content__title flex">{{ item.car_Type_Name }}
							{{ item.configuration_Name }}</view>
					</view>
				</view>

				<!-- 外观 -->
				<view v-if="item.colour !== ''">
					<!-- <view style="width: 28rpx;height: 28rpx;border-radius: 50%;position: relative;overflow: hidden;">
						<view style="width: 28rpx;height: 14rpx;border-radius: 28rpx 28rpx 0 0;background-color:red;right: 0;top: 0;"></view>
						<view style="width: 28rpx;height: 14rpx;border-radius: 0 0 28rpx 28rpx;background-color:#EEEEEE;right: 0;bottom: 0;"></view>
					</view> -->
					<view class="title flex flex-ai-c">
						<view style="letter-spacing: 6.5rpx;" class="width">外观内饰:</view>
						<view class="flex flex-ai-c colorList">
							<view class="flex flex-ai-c flex-wrap-w">
								<view class="color"
									:style="{ background: JSON.parse(item.colour).outerColour.colorCoding }"></view>
								<!-- <view class="color" :style="{background:JSON.parse(item.colour).outerColour[0].colorCoding}"></view> -->
								<view>外观+内饰</view>
								<view class="colorCoding flex"
									v-if="JSON.parse(item.colour).inColour.neiColor.length === 1">
									<view class="color" style="margin-left: 10rpx;"
										:style="{ background: JSON.parse(item.colour).inColour.colorCoding }"></view>
									<!-- <view class="color" :style="{ background: JSON.parse(item.colour).inColour.neiColor.colorCoding }"></view> -->
								</view>
								<view v-else>
									<view class="color" style="margin-left: 10rpx;"
										:style="{ background: JSON.parse(item.colour).inColour.colorCoding }"></view>
								</view>
							</view>
						</view>
					</view>
					<view></view>
				</view>

				<!-- 个人方案 -->
				<view class="flex" style="margin: 20rpx 0 20rpx 0;">
					<view class="title flex" style="flex: 1;">
						<view class="width">{{ item.finance_Plan_Type === 0 ? '个人户方案:' : '公司方案:' }}</view>
						<view class="flex" style="width: 70%;font-size: 26rpx;flex-wrap: nowrap;">
							<view style="margin-right: 5rpx;">首付{{ item.down_Payment_Money | million }}</view>
							<view style="margin-right: 5rpx;">月供{{ item.installment_Monthly_Money | million }}</view>
							<view>期数{{ item.installment }}期</view>
						</view>
					</view>

				</view>
			</view>


			<!-- btn -->
			<view class="card-bottom">
				<!-- 待审核 未通过-->
				<view class="card-bottom-operate"
					v-if="item.status === 1 || item.status === 5 || item.status === 10 || item.status === 25">
					<view class="card-bottom-operate__btn">
						<i-icon icon="iconxiaoxi" type="single" size="32rpx"></i-icon>
						<text @click="contact(item)">在线咨询</text>
					</view>
					<view class="card-bottom-operate__btn" @click="phone(item.phone)">
						<i-icon icon="icondianhua" type="single" size="28rpx"></i-icon>
						<text>致电门店</text>
					</view>
				</view>

				<!-- 待补充资料-->
				<view class="operate" v-if="item.status === 15">
					<view style="width: 372rpx;font-size: 22rpx; color: #EB5C02;">恭喜！审核通过，根据银行、资方放款要求还需*&……</view>
					<view class="card-bottom-operate__btn" @click="toDetailPage(item, item.status)">
						<text>即刻补交</text>
						<i-icon icon="iconxiala1" style="transform: rotate(-90deg);" size="18rpx"></i-icon>
					</view>
				</view>

				<!-- 待付款 待提车 已完成-->
				<view class="operate"
					v-if="item.status === 30 || item.status === 40 || item.status === 35 || item.status === 45">
					<view style="width: 372rpx;font-size: 22rpx;" class="flex flex-jc-sb">
						<view>保证金：<text
								style="color: #EB5C02;font-size: 24rpx;font-weight: bold;">￥{{ item.earnest_Money | million}}</text>
						</view>
						<!-- <view>实付款：￥{{ item.actually_Money }}</view> -->
					</view>

					<!-- 待付款 -->
					<view class="card-bottom-operate__btn" v-show="item.status === 30" @click="goPay(item)">
						<text>去支付</text>
						<i-icon icon="iconxiala1" style="transform: rotate(-90deg);" size="18rpx"></i-icon>
					</view>

					<!-- 待提车 -->
					<view class="card-bottom-operate__btn" v-show="item.status === 35 || item.status === 40"
						@click="toDetailPage(item, item.id)">
						<text>确认提车</text>
					</view>

					<!-- 已完成 -->
					<!-- <view class="card-bottom-operate__btn" v-show="item.status === 45" @click="tq"><text>尊享特权</text></view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import timLogin from '@/utils/timLogin.js' // 导入tim 登录
	export default {
		name: 'buyList',
		props: {
			resetTimes: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				status: [{
				  id: 1,
				  status: '待审核'
				},
				{
				  id: 5,
				  status: '待审核'
				},
				{
				  id: 10,
				  status: '未通过'
				},
				{
				  id: 15,
				  status: '待补资料'
				},
				{
				  id: 20,
				  status: '待审核'
				},
				{
				  id: 25,
				  status: '未通过'
				},
				{
				  id: 30,
				  status: '待付款'
				},
				{
				  id: 35,
				  status: '待提车'
				},
				{
				  id: 40,
				  status: '待提车'
				},
				{
				  id: 45,
				  status: '已完成'
				},
				{
				  id: 50,
				  status: '订单关闭'
				}
				  // '未通过', '待补资料', '待审核', '未通过', '待付款', '待提车', '已完成', '订单关闭',
				],
			}
		},
		filters: {
		  million(value) { //过万处理
		  	let num
		  	if (value > 9999) { //大于9999显示x.xx万
		  		num = ((value / 1000) / 10).toFixed(2) + '万'
		  	} else if (value <= 9999 && value >= -9999) {
		  		num = value + '元'
		  	} else if (value < -9999) { //小于-9999显示-x.xx万
		  		num = -((Math.abs(value) / 1000) / 10).toFixed(2) + '万'
		  	}
		  	return num
		  },
		  formatStoreType(data) {
		    let text = ''
		    switch (Number(data)) {
		    case 0:
		    case 1:
		      text = '待审核'
		      break
		    case 10:
		      text = '未通过'
		      break
		    case 15:
		      text = '待补资料'
		      break
		    case 30:
		      text = '待付款'
		      break
		    case 40:
		      text = '待提车'
		      break
		    case 45:
		      text = '已完成'
		      break
		    default:
		      text = ''
		      break
		    }
		    return text
		  }
		},
		methods: {
			goPay(e) {
				uni.navigateTo({
					url: '/pages_commodity/payment/payment?orderNo=' + e.id + '&price=' + e.earnest_Money +
						'&type=butCarOrder'
				})
			},
			// 拨打电话
			phone(num) {
				console.log(num)
				uni.makePhoneCall({
					phoneNumber: num
				})
			},
			//一成首付在线咨询
			getCont(getList) {
				console.log('https://files.yzsheng.com/goodimg/brandimg/' + getList.brand_Id + '.png')
				/* this.$store.scommit('news/createConversationActive', {
				  user: getList.store_Name, //店铺名称
				  img: getList.store_TopImg, //店铺头像
				  lastTime: '', //
				  userId: getList.store_Id, //店铺id
				  conversationID: 'C2C',
				}) */
				// uni.navigateTo({
				//   url: '/pages_news/room/room?user=' + toUserInfo.user
				// })
				this.$store.commit('news/createConversationActive', {
					user: getList.store_Name, //店铺名称
					img: getList.store_TopImg, //店铺头像
					lastTime: '', //
					userId: getList.store_Id, //店铺id
					conversationID: 'C2C',
				})
				this.$store.commit('news/setCardInfo', {
					imgSrc: 'https://files.yzsheng.com/goodimg/brandimg/' + getList.brand_Id + '.png',
					name: getList.car_Type_Name + getList.configuration_Name,
					price: getList.factory_Money,
					type: 'resaleCar',
					goPage: '0',
					payment: getList.down_Payment_Money, //首付
					monthly: getList.installment_Monthly_Money //月供
				})
				uni.navigateTo({
					url: '/pages_common/contactSeller/contactSeller?user=' + getList.store_Name + '&pageId=' +
						getList.id + '&tab=1'
				})
			},
			contact(getList) {
				// 登录tim
				if (this.$store.state.isSDKReady) {
					this.$u.debounce(this.getCont(getList), 2000)
				} else {
					timLogin(() => {
						this.$u.debounce(this.getCont(getList), 2000)
					})
				}
			},
			//店铺详情
			onStore(id) {
				uni.navigateTo({
					url: '/pages_store/newCarStore/index/index?storeid=' + id
				})
			},
			//跳转购车订单详情
			toDetailPage(item, id) {
				uni.navigateTo({
					url: '/pages_order/buy_order/details/details?id=' + item.id
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '../orderCenter.scss';
</style>
